英文:
Fixing HTML Page Structure on CMS
问题
我被要求在工作中修复一个网站的可访问性问题，需要一些帮助。我们的网站是基于AEM（Adobe Experience Manager）构建的，除了添加/删除类之外，我们无法更改标记的结构。AEM生成的标记结构完全不可访问（请参见代码示例）。
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
我知道最好使用像下面这样的符合标准的代码，但我们无法这样做，因为无法更改HTML。在这种情况下，是否建议使用JavaScript将角色更改为“header”/“footer”来解决问题？
<body>
<header id="header">
<nav aria-label="primary">...</nav>
</header>
<footer id="footer">
</body>
我已阅读了W3C文档，我知道构建页面的最佳选项是使用语义化HTML元素，但我们无法这样做。
英文:
I was tasked at work to fix some accessibility issues on one of our websites and would like some help.
Our websites were built on AEM (Adobe experience manager) and we are not able to change the markup, other than adding/removing classes.
The structure of the markup generated by AEM is not accessible at all (see code sample).
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
I know it would be best to use compliant code like the one below, but we are not able to do so because we cannot change the html. What is recommended in this case? Does changing the role to "header"/"footer" with JavaScript solve the problem?
<body>
<header id="header">
<nav aria-label="primary">...</nav>
</header>
<footer id="footer">
</body>
I have read the w3c documentation and I know the best option for structuring a page is by utilizing semantic HTML elements, but we cant do that.
答案1
得分: 1
使用语义化的HTML显然是最佳选择（参见ARIA规则＃1），但通过JavaScript添加角色的<div>应该也可以工作。这应该与具有<div id="header" role="banner">相同。
请注意：
<header>是role="banner"<nav>是role="navigation<footer>是role="contentinfo
你碰巧选择了三个地标角色。
英文:
Using semantic HTML is obviously best (see rule #1 of ARIA) but having a <div> with a role added via javascript should work. It should be the same as having <div id="header" role="banner">.
Note that
<header>isrole="banner"<nav>isrole="navigation"<footer>isrole="contentinfo"
You happened to pick three landmark roles.
答案2
得分: 0
很显然，正如您所提到的，最好的方法是更改HTML以使用语义元素。
所首先，请尝试投入时间和精力来修复您的CMS生成的HTML。我不了解您使用的具体CMS，但通常情况下不应该太难做到。可以找到更具可访问性的主题和插件，更改一些模板等等。
如果真的，真的，非常难以深入了解您的CMS代码，而且切换到另一个生成更具可访问性代码的CMS也太复杂，那么您可以考虑编写一个脚本。但基本上，您将会在一些非常脆弱的事情上消耗能量，所以只有在您真正尝试了所有其他可能性后才应该这样做。
现在关于脚本本身：通常来说，向现有元素添加一个角色并不能完全保证在每种情况、每种配置中都能正常工作。就像使用aria-live一样，您必须非常小心。存在许多不同的bug，而且从未明确规定过是否必须实时跟踪角色的添加或更改。特别是在标志点方面，屏幕阅读器可能无法识别，这意味着在通过标志点导航时可能被跳过，或者在跳转到标志点列表时可能不存在，使整个努力变得完全无效。
确保元素在支持的所有地方都考虑到其角色的唯一方法是从一开始就在页面中拥有它。即使在页面加载后在DOM中添加具有其角色的元素也不是100%（特别是涉及aria-live的所有角色），尽管它的概率要高得多（99%？）可以被捕获，而不是向现有元素添加或更改角色属性。
因此，基本上为了最大的机会，您必须或多或少地重写整个页面，那时您可以使用语义元素。
您真的不能触碰您的CMS生成的代码吗？
英文:
Obviously, as you have mentioned, the best would be to change the HTML to use semantic elements.
So first of all, try to invest your time and energy to fix the HTML produced by your CMS.
I don't know about the particular CMS you are using, but it shouldn't be so difficult to do normally. Find a more accessible theme and plugins, change a few templates, etc.
If really, really, really, it's too difficult to dive into the code of your CMS and it's too complicated to switch to another CMS producing more accessible code, then you can think about making a script.
But basically, you are going to consume energy in something very fragile, so it should only be done if you have truly exhausted all other possibilities.
Now about the script itself: generally, adding a role to an existing element is not totally guaranteed to work for every roles, on every elements, in every configurations.
As with aria-live, you must be very cautious with that. There are many and various bugs with that, and it has never been well specified whether or not role additions or changes had to be tracked live. In particular with landmarks, the screen reader may not pick it up, meaning that it could be skipped when navigating by landmark, or be absent from a landmark list to jump to, making the whole effort totally useless.
The only way to make sure that the element is always taken into account with its role everywhere where it's supported is to have it in the page from the start. Even adding an element in the DOM with its role after page load isn't 100% (in particular all roles involving aria-live), though it's has much better probability (99%?) to be picked up than adding or changing a role attribute to an existing element.
So basically for maximum chances, you have to more or less rewrite all your page, and at that point you can just use semantic elements.
Can't you really touch the code produced by your CMS ?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论