Blind and Visually Impaired Community
↑
2
↓
Any advice to make a web page accessible to braille display users? (self.Blind)
submitted by redalastor
Hi!
I’m volunteering to remake the website of a charity that houses deaf and deaf-blind people. The current website is currently poorly accessible. The links are tiny and shift around under the mouse, the text is mostly in pictures, etc.
Currently, the most useful part for the residents (the activity schedule) is done as posters created with PowerPoint converted to images.
I already know about proper markup, not having your text in images, and proper Alt tags.
I was wondering if there was anything special I had to keep in mind to make it as possible for the deaf-blind residents.
Any advice is appreciated.
I’m volunteering to remake the website of a charity that houses deaf and deaf-blind people. The current website is currently poorly accessible. The links are tiny and shift around under the mouse, the text is mostly in pictures, etc.
Currently, the most useful part for the residents (the activity schedule) is done as posters created with PowerPoint converted to images.
I already know about proper markup, not having your text in images, and proper Alt tags.
I was wondering if there was anything special I had to keep in mind to make it as possible for the deaf-blind residents.
Any advice is appreciated.
fastfinge 2 points 6y ago
Have you got any content with audio on the site (podcasts, youtube videos, etc)? If so, it needs to be transcribed.
redalastor [OP] 2 points 6y ago
All the residents are deaf so there's no audio content at all.
fastfinge 2 points 6y ago
Fair enough. I thought they might have some for outreach or advertising or whatever.
redalastor [OP] 2 points 6y ago
Not yet. And it's possible that there will be videos in sign language so those would need transcripts.
fastfinge 2 points 6y ago
Correct. I don't have a braille display myself, so I'm not sure how well the youtube captions work with one; they can scroll pretty quick. You might need to write the transcription on the page itself under the video.
This is actually something I'm trying to find out, though, as I'm seriously considering requiring that all audio content posted to /r/blind be fully transcribed. I'm reluctant to do this, because a lot of quality content is in podcasts, and I think that we have only 1 or 2 deafblind subscribers out of two thousand. However, that's a really poor excuse for not enforcing universal accessability.
This is actually something I'm trying to find out, though, as I'm seriously considering requiring that all audio content posted to /r/blind be fully transcribed. I'm reluctant to do this, because a lot of quality content is in podcasts, and I think that we have only 1 or 2 deafblind subscribers out of two thousand. However, that's a really poor excuse for not enforcing universal accessability.
KidA001 1 points 6y ago
I just finished working on a website intended for non-sighted users. I'm not sure how much of the HTML you're creating yourself, but here's some of my takeaways:
* Simplicity goes a long way
* If you're not familiar with ARIA tags, read up about them and use them `<div id='cartButton' aria-label='Add to cart'>...</div>`
* Stick with the built in HTML tags, use heading tags, paragraph tags, lists...etc. Screen readers look for these things and it makes it much easier to navigate
* Set the tab-index on actionable items (i.e. links, buttons, form items) `<a href src='foo.com' tab-index=2>Foo</a>`
* Use a screen-reader to navigate the website, it will give you a much better understanding of what it feels like to interact with the site. If you're on a mac, just press cmd + f5
* Simplicity goes a long way
* If you're not familiar with ARIA tags, read up about them and use them `<div id='cartButton' aria-label='Add to cart'>...</div>`
* Stick with the built in HTML tags, use heading tags, paragraph tags, lists...etc. Screen readers look for these things and it makes it much easier to navigate
* Set the tab-index on actionable items (i.e. links, buttons, form items) `<a href src='foo.com' tab-index=2>Foo</a>`
* Use a screen-reader to navigate the website, it will give you a much better understanding of what it feels like to interact with the site. If you're on a mac, just press cmd + f5
BlindGuyNW 1 points 6y ago
Just as an FYI, there are a couple iffy practices mentioned here. Tabindex in general should only ever be set to 0 or, perhaps, -1. It can really confuse expected behavior if you set it explicitly. See, for instance, http://webaim.org/techniques/keyboard/tabindex, among others.
Aria DIV like this is equally discouraged. It won't be accessible to non-screen reader keyboard users without extra work, and <button> and <input> are already perfectly serviceable.
It's just worth remembering that screen readers aren't the only assistive technology around, and some techniques can hurt other disabled users if you aren't careful.
Aria DIV like this is equally discouraged. It won't be accessible to non-screen reader keyboard users without extra work, and <button> and <input> are already perfectly serviceable.
It's just worth remembering that screen readers aren't the only assistive technology around, and some techniques can hurt other disabled users if you aren't careful.
KidA001 1 points 6y ago
Thanks for this, interesting take on tab order and it will definitely change how I use it
KidA001 1 points 6y ago
Sorry, just seeing your post is for braille display users, the above was intended for screen readers but maybe it's helpful.
redalastor [OP] 1 points 6y ago
As far as I understood a braille display is just a different output device for a screen reader. So the better the screen reader can understand the content, the best it is for everyone.
I suppose that interaction patterns vary between an audio output and a braille device, I don't know. That's why I was asking about those devices.
Is ARIA relevant if the site is not interactive? It's meant to be purely informative and so far I don't even intend to add any Javascript.
I suppose that interaction patterns vary between an audio output and a braille device, I don't know. That's why I was asking about those devices.
Is ARIA relevant if the site is not interactive? It's meant to be purely informative and so far I don't even intend to add any Javascript.
KidA001 1 points 6y ago
From my understanding ARIA is very relevant. `aria-label` for example lets you override what a screen reader would normally read and instead reads what you put in the tag.
In other ways aria might not be needed, for instance I often use ARIA to override or hide elements that sighted users may need, but screen readers may not.
In other ways aria might not be needed, for instance I often use ARIA to override or hide elements that sighted users may need, but screen readers may not.
redalastor [OP] 1 points 6y ago
It does but the goal seems (according to MDN) to enhance interactive behaviour. The exemple they give is that you made a button with an X and you want it to show up as Close since X is a visual convention.
Though, I'll keep it in mind in case I need it. I saw aria-hidden while on MDN and I intend to make a liberal use of that on every bit of the HTML that's only meant to be pretty.
There are large chunks I won't need like adding a progressbar role to an item but I'll go through every tag and list the ones that might serve.
Thanks
Though, I'll keep it in mind in case I need it. I saw aria-hidden while on MDN and I intend to make a liberal use of that on every bit of the HTML that's only meant to be pretty.
There are large chunks I won't need like adding a progressbar role to an item but I'll go through every tag and list the ones that might serve.
Thanks
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc • HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.