关于对话框关闭请求的思考 (#博客文章)
内容提要
文章讨论了Chrome新增的dialog元素的closedby属性，允许通过“关闭请求”或点击对话框外部来关闭对话框。作者指出，许多网站使用自定义对话框，往往无法正确响应ESC键或手机的“返回”按钮，影响用户体验。自定义对话框与原生对话框的行为不同，使用“返回”按钮关闭对话框存在风险。
关键要点
-
Chrome新增了dialog元素的closedby属性，允许通过关闭请求或点击对话框外部来关闭对话框。
-
关闭请求可以通过ESC键在桌面设备上触发，但在手机上则可能通过返回按钮或手势触发。
-
许多网站使用自定义对话框，往往无法正确响应ESC键或手机的返回按钮，影响用户体验。
-
自定义对话框的实现通常存在可聚焦性差、无法被屏幕阅读器识别等问题。
-
移动设备的返回按钮可能会关闭对话框或导航到不同的URL，存在不确定性。
-
使用返回按钮关闭对话框的做法存在风险，可能导致用户体验不佳。
延伸解读
对话框关闭请求的实用性
Chrome新增的closedby属性使得对话框的关闭方式更加灵活，用户可以通过ESC键或点击对话框外部来关闭。这一变化有助于提升用户体验，尤其是在桌面设备上。然而，移动设备的关闭方式仍然存在不确定性，开发者需要关注不同设备的行为差异。
自定义对话框的风险
许多网站使用自定义对话框，这些实现往往无法正确响应ESC键或手机的返回按钮，可能导致用户体验不佳。开发者应当意识到，自定义对话框的可聚焦性和可访问性问题，避免影响用户的操作流畅性。
移动设备的关闭方式
在移动设备上，用户关闭对话框的方式可能包括返回按钮或手势，但这些方式的行为并不一致。开发者需要测试不同设备上的对话框关闭效果，以确保用户在使用时不会感到困惑或误操作。
延伸问答
Chrome的dialog元素新增了什么属性？
Chrome新增了dialog元素的closedby属性，允许通过关闭请求或点击对话框外部来关闭对话框。
关闭请求是如何触发的？
关闭请求可以通过在桌面设备上按ESC键触发，在手机上则可能通过返回按钮或手势触发。
自定义对话框存在什么问题？
自定义对话框通常存在可聚焦性差、无法被屏幕阅读器识别等问题，影响用户体验。
使用手机的返回按钮关闭对话框有什么风险？
使用返回按钮关闭对话框可能导致导航到不同的URL，存在不确定性，影响用户体验。
为什么许多网站不使用原生对话框？
许多网站使用自定义对话框，往往因为开发者对原生dialog元素的了解不足，导致实现不佳。
自定义对话框与原生对话框有什么不同？
自定义对话框的行为与原生对话框不同，通常无法正确响应ESC键或手机的返回按钮。
