aria   3672

« earlier    

Level Access
The meaning of the word “menu” within web technologies is variable and encompasses many different types of functionality.
navigation  aria  accessibility  webdev 
11 days ago by mathieup
Screen Readers and ALL CAPS
When you type something in ALL CAPS, screen readers spell it out like: A-L-L C-A-P-S, it's super annoying if it's not an abbr, so use CSS
screenreaders  accessibility  aria  abbr  abbreviations  capitalization 
14 days ago by spaceninja
Unlabelled search fields
He looks at markup patterns for search forms and advocates that we should always use a label. I agree. But for some reason, we keep getting handed designs that show unlabelled search forms. And no, a placeholder is not a label.
search  forms  accessibility  labels  aria 
15 days ago by spaceninja
aria-label is a xenophobe
Unfortunately, unlike longstanding attributes marked for assistive technology consumption (alt and title to name a couple), aria-label is ignored by Google’s translator. MS Translate has the same issue, I’m told.
fridayfrontend  translation  localization  internationalization  aria  language  accessibility 
15 days ago by spaceninja
WAI-ARIA Graphics Module
RT : The has published an updated Working Draft (WD) of the Graphics module
and the…
ARIA  from twitter_favs
16 days ago by danbri
RT : The has published an updated Working Draft (WD) of the Graphics module
and the…
ARIA  from twitter_favs
16 days ago by danbri
A Tale of Two Rooms: Understanding screen reader navigation
"For those of us who use screen reading software such as JAWS, NVDA, or VoiceOver to access information on the Web, the user experience can be quite different from those who can visually see the content. One of my goals throughout the many accessibility focused training classes I have led has been to help others more accurately understand what it is like for someone using screen reading software to navigate through a web page."
accessibility  aria  webdevelopment 
16 days ago by garrettc
A Tale of Two Rooms: Understanding screen reader navigation
"As you move the light around the darkened room you will need to build a mental map or image of what is in the room and how it is laid out. Building this mental map will take significantly longer than visually scanning the room when all the lights were on. As you move the flashlight around, you will need to remember each thing you have seen and how they all relate together. If you forget where something is located, it will take more time to locate it."
fridayfrontend  accessibility  screenreaders  aria 
18 days ago by spaceninja
Job on Twitter: "Building a tabpanel, noticing VoiceOver announces each `role="tab"` as selected unless I explicitly set `aria-selected` to "false". Is this expected behaviour? @heydonworks @MichielBijl @stommepoes"
"Building a tabpanel, noticing VoiceOver announces each `role="tab"` as selected unless I explicitly set `aria-selected` to "false". Is this expected behaviour? "

To which Michiel replied:

"'The active tab element has the state aria-selected set to true and all other tab elements have it set to false.'

And then Heydon asked, "Interesting! In practice, I guess only the selected tab is usually announced (because it's the only one ever focused), but I did not know this."

To which Michiel replied:
"Depends on whether you switch on focus or require user activation. Both patterns are in the guide."

And Mallory chimed in with:
"Not having aria-selected as an attribute somehow equalling true automagically sounds very, very, very wrong. Is this listed somewhere?? (in the way aria-multiline=false is states as a default for textboxes in a combobox)"

And then Michiel quoted:
"'If no DOM element in the widget is explicitly marked as selected, assistive technologies MAY convey implicit selection which follows the keyboard focus of the managed focus widget.'

'If any DOM element in the widget is explicitly marked as selected, the user agent MUST NOT convey implicit selection for the widget.'"

"So it depends on whether @detonite set aria-selected to true on any of the tabs. If not, it’s correct behaviour. If they did, VoiceOver messed up and should only announce the tab with aria-selected=true as the selected one."

And then Mallory asked,
"So wait. If I have 3 tabs with no aria-selected attr at all (I removeAttr'd them) and one has aria-selected=true, then the others shouldn't be seen as true by default, right? I've been removing attrs instead of setting strings to false for some components. This is hard to read."

To which Michiel replied:
"In theory, yes. That’s also how it works in practice with Safari 11.0.2 on macOS 10.13.2.

"In that example only the Job tab is announced as selected."

To which Job added:
"Not in VO on El Capitan, that sounds like a bug. I just checked, this behaves the same as my own code."

And Michiel replied with:
"Okay, so bug in El Capitan that has been fixed in either Sierra (10.12) or High Sierra (10.13)."

And Job replied to say,
"So that's two identified bugs in VO since this week. Bah. (The other was aria-current, with @JulezRulez and @LeonieWatson)"

And Michiel asked,
"Also in El Capitan?"

And Job replied:
"Sorry, yes - both of these I've confirmed in El Capitan only."
tabs  aria  accessibility  a11y  2018  detonite  michielbijl  stommepoes  tabpanel  bugs  voiceover 
23 days ago by handcoding
RT : 灯里ちゃんお誕生日おめでとございまーす!!

ARIA  from twitter
24 days ago by geshtalt
xi/aria-api: Access ARIA information from JavaScript
This JavaScript library lets you calculate the ARIA role of any element within the DOM.
javascript  libraries  dom  aria  accessibility  a11y  2018 
29 days ago by handcoding

« earlier    

related tags

2017  2018  a11y  abbr  abbreviations  accesibility  accessability  accessibility  accessibiliy  accessible  accordion  advice  aria-expanded  aria-selected  article  attribute  autocomplete  bestpractice  breadcrumb  browsers  bugs  button  buttons  capitalization  carousel  change  citizensonline  clevermarks  code  coding  collapse  collapsible  component  components  css  custom  customelements  datauri  design  detonite  development  dom  elements  examples  forms  fridayfrontend  google  guidelines  headings  hover  howto  howtos  html  html5  ifttt  images  inclusive  interface  internationalization  javascript  jaws  js  keyboard  keyboarshortcuts  labels  landmarks  language  layout  libraries  listbox  live_region  localization  menu  michielbijl  modal  navigation  newtoa11y  pattern  patterns  player  plugins  popup  programming  react.js  react  reactjs  recommendations  reference  resource  responsive  ressource  roles  rules  rwd  screen  screen_reader  screen_readers  screenreader  screenreaders  script  search  section  semantics  senior  shadowdom  standards  state  stommepoes  svg  switch  tab  tabpanel  tabs  testing  thor/loki  thor  tips  toggle  tolearn  tools  tooltip  tooltips  touch  translation  tree  tutorial  ui  voiceover  w3c  wai  wcag  web-development  web  webcomponents  webdesign  webdev  webdevelopment  work 

Copy this bookmark: