How to Create an Accessible WordPress Site

16 Flares 16 Flares ×

This image displays the different effects of colour blindness. In particular, blue-yellow and red-green deficiencies.Does your website have entrance ramps for wheelchair users, and braille buttons on its elevators? Many users with physical impairments find that the digital world can be just as daunting as the world of bricks and mortar. When designing and creating for the Internet age, it’s easy to put yourself in the place of your readers. But it takes all kinds to make a world, so you should create for everyone who might visit your site.

In this week’s post, we’re going to look at some of the basic steps that you can take to ensure that your website is accessible and welcoming to everyone. Creating an accessible WordPress site can be challenging, but it is always rewarding.

Designing for the Visually Impaired

One of the most basic steps that you can take is to ensure that your website can easily be accessed by visually impaired users. The nice thing about these approaches is that they are also central to good web design more generally. The websites Visually Impaired Site Design, Mashable , and the American Foundation for the Blind have some great tips:

  1. Text. Limit the use of graphical text as much as possible. As well, make sure the font size on your website can be increased (see last week’s post about font sizes). Above all, make sure that all images have meaningful alternative text, especially images that convey information. In WordPress, you can see this in Image Properties > Alternate Text.
     
  2. Colour. Make sure that you use solid colors that contrast well. As well, be mindful of colorblindness when designing forms. Avoid using color combinations that are easily confused by colorblind users, e.g. red/green and blue/yellow.

  3. Layout. If your website has a mobile version, you should allow desktop users to access it. Mobile layouts tend to be much more visually accessible than their desktop counterparts.
     
  4. Navigation. Allowing keyboard shortcuts to navigate your website will earn you some major credibility among visually impaired users.

Designing for Dyslexics

Dyslexia is a spectrum of learning disabilities that make it difficult for many people to read. Roughly 5 to 10 percent of the population has some form of dyslexia, which can make reading on the Internet a struggle.

Abelardo Gonzalez, a coder from Boston, recently created a font especially for some dyslexics. From his website:

Your brain can sometimes do funny things to letters. OpenDyslexic tries to help prevent some of these things from happening. Letters have heavy weighted bottoms to add a kind of "gravity" to each letter, helping to keep your brain from rotating them around in ways that can make them look like other letters. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent flipping and swapping.

Dyslexia affects about 5–10 percent of people worldwide – so Gonzalez’s font could help millions of dyslexics navigate the treacherous waters of the web.

But does this mean that you should switch your website over to the Open-Dyslexic font? Not necessarily. Typography and design are a delicate dance. But you might want to consider putting into place a button that allows users to switch between Open Dyslexic and regular fonts. There is a basic JavaScript function on this website that can be adapted with a little know-how. Alternatively, you can point dyslexic users to the Open-Dyslexic downloads page, which has links to a variety of resources.

Above all, when designing and writing for your site, it always helps to keep visually and reading-impaired readers in mind. By taking a few steps in the right direction, you can extend a welcoming hand to thousands of potential visitors.

(Feature image credit: We Read Better)

Want more of this awesome content?

 

Sign up to receive our Monthly Newsletter

 
Chosen one of the Top Ten Social Media Companies in Canada

Join our eClub

Powered by Subscribers Magnet

Follow Us on Google+

View More of Our How to’s on Slideshare

View Supernova Media's profile on slideshare
About Nancy Bain

Our services include building optimized, functional and self managed WordPress websites, Nova Scotia social media training and consulting, interactive full screen high definition virtual tours with lead capture and print advertising. For most of our clients, we are their one stop solution for all things marketing, branding and small business development related.

2 comments
curamedicine perth ivf Support
curamedicine perth ivf Support

I do not write a comment, but I browsed a lot of responses on How to Create an Accessible WordPress Site. I actually do have some questions for you if it's allright. Is it just me or do a few of these remarks appear like they are coming from brain dead visitors? :-P And, if you are writing on other sites, I would like to follow you. Would you post a list of the complete urls of your social sites like your linkedin profile, Facebook page or twitter feed?

snmedia
snmedia

You can visit all the links to my social profiles in my header and footer. Thanks so much for dropping by!

How to Create an Accessible WordPress Site

16 Flares 16 Flares ×

This image displays the different effects of colour blindness. In particular, blue-yellow and red-green deficiencies.Does your website have entrance ramps for wheelchair users, and braille buttons on its elevators? Many users with physical impairments find that the digital world can be just as daunting as the world of bricks and mortar. When designing and creating for the Internet age, it’s easy to put yourself in the place of your readers. But it takes all kinds to make a world, so you should create for everyone who might visit your site.

In this week’s post, we’re going to look at some of the basic steps that you can take to ensure that your website is accessible and welcoming to everyone. Creating an accessible WordPress site can be challenging, but it is always rewarding.

Designing for the Visually Impaired

One of the most basic steps that you can take is to ensure that your website can easily be accessed by visually impaired users. The nice thing about these approaches is that they are also central to good web design more generally. The websites Visually Impaired Site Design, Mashable , and the American Foundation for the Blind have some great tips:

  1. Text. Limit the use of graphical text as much as possible. As well, make sure the font size on your website can be increased (see last week’s post about font sizes). Above all, make sure that all images have meaningful alternative text, especially images that convey information. In WordPress, you can see this in Image Properties > Alternate Text.
     
  2. Colour. Make sure that you use solid colors that contrast well. As well, be mindful of colorblindness when designing forms. Avoid using color combinations that are easily confused by colorblind users, e.g. red/green and blue/yellow.

  3. Layout. If your website has a mobile version, you should allow desktop users to access it. Mobile layouts tend to be much more visually accessible than their desktop counterparts.
     
  4. Navigation. Allowing keyboard shortcuts to navigate your website will earn you some major credibility among visually impaired users.

Designing for Dyslexics

Dyslexia is a spectrum of learning disabilities that make it difficult for many people to read. Roughly 5 to 10 percent of the population has some form of dyslexia, which can make reading on the Internet a struggle.

Abelardo Gonzalez, a coder from Boston, recently created a font especially for some dyslexics. From his website:

Your brain can sometimes do funny things to letters. OpenDyslexic tries to help prevent some of these things from happening. Letters have heavy weighted bottoms to add a kind of "gravity" to each letter, helping to keep your brain from rotating them around in ways that can make them look like other letters. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent flipping and swapping.

Dyslexia affects about 5–10 percent of people worldwide – so Gonzalez’s font could help millions of dyslexics navigate the treacherous waters of the web.

But does this mean that you should switch your website over to the Open-Dyslexic font? Not necessarily. Typography and design are a delicate dance. But you might want to consider putting into place a button that allows users to switch between Open Dyslexic and regular fonts. There is a basic JavaScript function on this website that can be adapted with a little know-how. Alternatively, you can point dyslexic users to the Open-Dyslexic downloads page, which has links to a variety of resources.

Above all, when designing and writing for your site, it always helps to keep visually and reading-impaired readers in mind. By taking a few steps in the right direction, you can extend a welcoming hand to thousands of potential visitors.

(Feature image credit: We Read Better)

Want more of this awesome content?

 

Sign up to receive our Monthly Newsletter

 
Chosen one of the Top Ten Social Media Companies in Canada

Join our eClub

Powered by Subscribers Magnet

Follow Us on Google+

View More of Our How to’s on Slideshare

View Supernova Media's profile on slideshare
About Nancy Bain

Our services include building optimized, functional and self managed WordPress websites, Nova Scotia social media training and consulting, interactive full screen high definition virtual tours with lead capture and print advertising. For most of our clients, we are their one stop solution for all things marketing, branding and small business development related.

2 comments
curamedicine perth ivf Support
curamedicine perth ivf Support

I do not write a comment, but I browsed a lot of responses on How to Create an Accessible WordPress Site. I actually do have some questions for you if it's allright. Is it just me or do a few of these remarks appear like they are coming from brain dead visitors? :-P And, if you are writing on other sites, I would like to follow you. Would you post a list of the complete urls of your social sites like your linkedin profile, Facebook page or twitter feed?

snmedia
snmedia

You can visit all the links to my social profiles in my header and footer. Thanks so much for dropping by!

16 Flares Twitter 2 Facebook 10 Google+ 2 Pin It Share 0 LinkedIn 2 StumbleUpon 0 Buffer 0 16 Flares ×