Making my site accessible to the blind

[Eunice]

I'm having to face up to the fact that before I hit the end of my 70's, I'll likely be blind. Or at the least, having a lot of trouble seeing. My optician told me that I have the beginnings of macular degeneration. My father has it and he is registered blind. So, how to make a site more accessible to the blind?

One thing would be to make sure that all the images I use have title="blah" on them. I did download an accessibility checker, but I think it's meant for wordpress sites.  Not for good old fashioned html and css. Ah well, the title thing should help a little. Any more ideas? Thanks!

[brisray]

Hopefully your macular degeneration will have a very slow progression. It's a terrible disease and I know a couple of people who have it.

Your website should meet Web Content Accessibility Guidelines (WCAG) version 2.2 to at least AA standards. Version 3 is already being prepared. It's the alt tags that screen readers use, not so much the title tags.

People who have severe MD will use a lot of assistive technology. There's no way around it but no website I know of is going to look good at 800x magnification that one guy I knew had to view them at. With a screen reader he managed OK, but I couldn't use the sites he visited at all. The most you can do is not make the site too horrible to use at all.

The main takeaways I got from using sites like that is to use higher than recommended contrast ratios and making sure the site is fully keyboard navigable. The assistive technology includes very high contrast modes but can't help much keyboard navigation.

W3C has a list of tools to help check for compliance, but there are others around. Last year I took a long look at my own site and found it was sadly lacking in some accessibility areas which I am trying to address.

The sites in the a11y webring are worth looking around for ideas and suggestions.

[di]

This past summer, making my website more accessible was a project of mine.

I'm not an expert on accessible web design. What I do know is mostly based on these guides

• Solaria's guide
• Semantic HTML cheat sheet
• Whimsica11y
• the list of guidelines on Accessible Net Directory

but knowing what I know, I feel like your site won't be too hard to update for accessibility.

My main takeaway from those guides is that using semantic HTML is the best way to make your page screenreader-friendly. Semantic HTML means using tags for their technical purpose. That way, the screenreader finds it easier to read your HTML.

For example, your /index2 page uses a table for navigation. From my understanding, tables can be a little bit finicky for screenreaders. The technical purpose of a table is to present data, so a screenreader might read your table of links as if it's talking about the sort of table you'd find in an academic paper or a lab report, instead of just a menu of links.

A more accessible way to design your navigation section would be to use a list. The technical purpose of a list is to list items, and that's what you're trying to do there!

Better yet, you could surround the list with a nav tag. The nav tag doesn't do much on its own, but it helps mark where the link navigation is for the screenreader.

So a more accessible navigation could look something like:

Code

<nav>
   <ul>
     <li><a href="page1.html">Link 1</a></li>
     <li><a href="page2.html">Link 2</a></li>
   <ul>
</nav>

You wrote that each image would need a title tag, but actually, title is not really useful for screenreaders. What it actually needs is an alt tag, followed by a description of the image.

If it's a creative or artsy image, your alt text could be flowery to give a similar effect. If the image is used to navigate the site (such as the picture that links to your guestbook), the alt text could simply be "Guestbook."

Last thing I'll say is that web accessibility can be a lot to take in at first. Take your time with it, or else it can feel frustrating. For me, I felt annoyed because it felt like I made my entire website wrong. You might have to make some changes. But if you're patient with it and absorb the knowledge on your own time, it can feel very rewarding to make your site more welcome for everybody (including your future self).

I hope I make sense, let me know if there's anywhere I didn't explain myself that well.

I recommend reading those links I shared above if you want to learn more.

Anybody, feel free to jump in and correct me if I'm off base about anything.

Oh, and this is an accessibility checker that should work for your site, that you don't have to download.

[Eunice]

Thank you both. I'd been changing the alt tags to title in all my sites, because I thought it was supposed to be better for browsers. Some of them didn't show the alt, I was told. I'll go back and change them all! And I'll have a look at those things you mentioned. Luckily I have the dry kind, so I'll be able to have injections in my eyes in years to come. Yikes!

[di]

You're right, alt text doesn't show in your browser. It's hidden, unless an image is broken. However, screenreaders read the alt text out loud!

[di]

(Sorry for posting twice in a row, not sure if there's a rule against that, but I remembered something)

If you're ever wanting to test your site (aside from running it through the checker), there's some advice on how to do that on this webpage. It also mentions specific screenreader software.

[devils]

Accessibility for blind users is a very good thing to keep in mind.

One thing I like to do every once in a while is to boot up a screen-reader (I use Orca as I'm a Linux user) and have it my site out loud. Sometimes I even close my eyes to see if I'm able to navigate it without seeing. Semantic HTML helps a lot because it tells the browser how a site is meant to be organized, as @di mentioned.

I've gotten decent at writing alt text (perhaps one day I will write about it on my site...), here's some tips:

• Keep the alt text relevant to the topic at hand- the same image can be described very differently depending on context. For example, a painting might be described in full if it's in an article about art, but if it's merely an example of an image for an unrelated purpose it might be beneficial to only include the title of the piece in the alt text.
• Never use the same text for alt and title. Some screen-readers don't read the title, but others read both the alt and the title, making it so they'd read the same thing twice! It's a very common mistake. It's best to keep image descriptions in alt text and to use the title tag for additional/unimportant information.
• Decorative images don't need alt text. Additionally, adding too many decorations may make the site less accessible in general, even for folks who aren't using a screen reader.

There's a lot of stuff to keep in mind, but generally speaking I suggest downloading a screen-reader and testing it out on your site. Is it reading your site the way you want it to be read? Or does it slow down the browsing process with needless stuff?

Sadly, not every webmaster keeps screen-readers in mind when making their website. So, I imagine it's frustrating for blind users to navigate the web a lot of the time...

Anyways, very sorry to hear about your diagnosis, but I hope you realize wanting to learn more about something like this because of it is pretty admirable. Best of luck!