wai-aria

Putting <a role> in Facelets composition shows message “Attribute role is not allowed here”

由 末鹿安然 提交于 2020-06-18 12:28:25
问题 I just tried to setup my jsf project with bootstrap. Everything works fine except that when I added a bootstrap template that includes the " role " attribute. I get a message that says Attribute role is not allowed here I'm not good with design and I'm focusing more with the backend so I really need to use bootstrap. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

Use aria-label on a span

由 白昼怎懂夜的黑 提交于 2020-05-17 07:17:05
问题 I'm showing product ratings using Unicode star symbols. iOS VoiceOver doesn't read this aloud correctly, so I thought I'd use aria-label on my span to tell screen readers what it means. <span aria-label="4.0 stars out of 5, 123 ratings">★★★★☆ 4.0 (123)</span> It's not working. iOS VoiceOver ignores my aria-label completely. What am I doing wrong? How can I fix this? 回答1: The aria-label is sometimes ignored by some assistive technology if the element you put it on doesn't have any semantic

What is the difference between aria-owns and aria-controls

由 我的未来我决定 提交于 2020-05-11 04:24:18
问题 What is the real impact on an element when using aria-owns="id" and(!) aria-controls="id" How do the browsers notify the screen readers when these two attributes are used? 回答1: Both aria-controls and aria-owns are used when the relation between the two element can't be determined from the DOM hierarchy itself. aria-controls is intended to indicate that an element controls another one. E.g. control buttons for a video for instance, a toolbar for a visual editor or a button for a collapsible

How to prevent screen reader focus (not referring to keyboard focus) from leaving predefined area (e.g., modal)

由 坚强是说给别人听的谎言 提交于 2020-03-04 20:57:11
问题 I've been trying to figure out how to contain the screen reader focus within a certain area. When I say screen reader focus, I don't mean the default browser focus that one can move with tabbing/shift-tabbing. I predominantly implement accessibility while using Voiceover on Mac, and when you turn that on, a new focus box appears on the page and reads out the information that it is 'highlighting'. At that point if you were to tab, both the browser and the screenreader focus move concurrently.

How to prevent screen reader focus (not referring to keyboard focus) from leaving predefined area (e.g., modal)

由 末鹿安然 提交于 2020-03-04 20:54:06
问题 I've been trying to figure out how to contain the screen reader focus within a certain area. When I say screen reader focus, I don't mean the default browser focus that one can move with tabbing/shift-tabbing. I predominantly implement accessibility while using Voiceover on Mac, and when you turn that on, a new focus box appears on the page and reads out the information that it is 'highlighting'. At that point if you were to tab, both the browser and the screenreader focus move concurrently.

Angular Material mat-label accessibility

由 荒凉一梦 提交于 2020-02-03 10:50:51
问题 I have a mat-form-field with a text input control. I have a mat-label and I also put an aria-label attribute attr.aria-label on the input element directly. Is the mat-label sufficient for screen readers by itself? Is the attr.aria-label necessary or redundant? <mat-form-field appearance="outline" floatLabel="always"> <mat-label>Username</mat-label> <input attr.aria-label="Username" formControlName="Username" matInput> </mat-form-field> The same question goes for the mat-select control. <mat

Angular Material mat-label accessibility

由 ↘锁芯ラ 提交于 2020-02-03 10:49:47
问题 I have a mat-form-field with a text input control. I have a mat-label and I also put an aria-label attribute attr.aria-label on the input element directly. Is the mat-label sufficient for screen readers by itself? Is the attr.aria-label necessary or redundant? <mat-form-field appearance="outline" floatLabel="always"> <mat-label>Username</mat-label> <input attr.aria-label="Username" formControlName="Username" matInput> </mat-form-field> The same question goes for the mat-select control. <mat

HTML ARIA validation issues (HTML5)

由 谁说我不能喝 提交于 2020-01-24 05:22:24
问题 I pretty much make sure my website(s) always validates. So today, after changing a certain item on my website, I ran the W3C validator once again. And suddenly got about 20 errors - which weren't there on thursday (2 days ago). (For my validation I chose HTML5 / UTF8 - just like last time) For some reason I now get a: Element li is missing one or more of the following attributes: aria-checked, aria-expanded, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role."-error for every

Should role=“contentinfo” be always added on footer element?

由 三世轮回 提交于 2020-01-22 05:12:45
问题 On ARIA demonstration websites, role="contentinfo" is usually added on footer element. However, footers in modern web design can be creative so that they can also contain things like supplementary navigation links, social website links, or even a newsletter form. Taking the following codes of footer for example. Should role="contentinfo" be added on the footer or the p element? <footer> <nav> <ul> ........ ........ ........ ........ ........ </ul> </nav> <form> ........ ........ ........ <

“Attribute aria-expanded not allowed on element li at this point”

由 有些话、适合烂在心里 提交于 2020-01-14 04:07:27
问题 I have the following code (from here): <div role="menubar"> <ul role="menu" aria-label="functions" id="appmenu"> <li role="menuitem" aria-haspopup="true" tabindex="0" aria-expanded="false"> File <ul role="menu"> <li role="menuitem" tabindex="-1">New</li> <li role="menuitem" tabindex="-1">Open</li> <li role="menuitem" tabindex="-1">Print</li> </ul> </li> <li role="menuitem" aria-haspopup="true" tabindex="-1" aria-expanded="false"> Edit <ul role="menu"> <li role="menuitem" tabindex="-1">Undo<
订阅 wai-aria