Helping Improve Support for Disabilities
The Care Homes Directory has started a campaign to try and improve our website accessibility so people who are less able and use say a screen reader or keyboard to navigate will still be able to have as good an experience as a more able user.
WCAG 2.0
Conforming to the WCAG 2.0 is a goal we have set for our website and we feel it is important to make our site and therefore data accessible to the widest range of visitors not just the well able.
The main sections of our website are WCAG 2.0 aa compliant and have been tested using both WAVE and AChecker to verify that our pages conform we also used the nu validator.
By using these tools you can make sure a website is accessible by make some usually small changes to things such as font size and colour contrasts.
Aria Roles
Aria roles help add semantics to webpages for aiding screen readers which improves the experience for a visually impaired user.
We have added role="navigation" to our navigation tags on the website as well as adding role="main" to our centre div which is the container for the main page content and if there is a page heading we have added role="heading" to our heading div.
For news articles we have added role="article" attribute to our article div this is along side the other microdata our webpages contain.
Lastly we added role="banner" to our <header> tag and role="contentinfo" to our <footer> tag both of which are on every page. You should only have a single banner and contentinfo roles per page.
In future releases we plan on adding some link section headings to help improve upon our page semantics even more.
Keyboard Navigation
For keyboard users we have improved site layout by using only divs for all site layout rather than the mix of divs and tables we previously had. We mention this in the article here.
We aim to add tab indexes to our templates at a future date to improve a keyboard users experience by making navigation even easier.
Getting Focus
Adding onload JavaScript to take focus onto the search widget with the search results below previously focus was being taken to the bottom <nav> links which is wrong.
We have also changed the initial focus on the home page to the keywords search input and also the same for country pages.
Having focus initially on the search function puts the user near the main content and also they can use a site search if they need some other data.
Running Tests
WAVE is a good tester for accessibility issues on your website and it can be used to navigate your website via a frame and displays any issues it finds.
Another tool we used to confirm we conform to WCAG 2.0 was AChecker as mention above this rates our website as WCAG 2.0 aa which is the second level of compliance. There are three levels in total a, aa and aaa with triple a being the heights level.
This level does not apply to us a we use no video or audio on our website that would need to be transcribed in an easy to access format.
Conclusion
Improving our websites accessibility is an important goal which we feel we have achieved we hope to lead by being the most accessible website for people who are less able.
As with all our improvements our effort to improve accessibility will be continuing and we will be adding improvements on an incremental basis.
New Layout More Information
The Care Homes Directory has a new compact town layout to help include even more information for our visitors including ownership type, rooms and contact name in at a glance format.
We hope to continue improving our data set and also improve our compact layout adding even more relevant information.
 |
| Compact Town |
Div Only Design
We have moved our website over to a pure div layout using no tables for any website structure we did have a div only template but some of the directory sections still used tables.
This should help improve our ability to change the layout more easily and also improves our keyboard navigation for users who cannot use a mouse.
 |
| Layout |
We have tested this layout using our usual cross browser testing which we have written about before and we hope it renders correctly in all browsers.
Our pages are fully HTML 5 compliant and have been tested using the w3c HTML validator we also used their CSS validator and Nu Markup tester.
The reason for using the Nu Markup tester is to test our new aria tags which help add even more semantics to our webpages. We have added roles to the main sections of our website and we are in the process of adding even more aria data.
After this is complete we hope to write an article outlining the features we have implemented and the reason for it. We are making a push to try and improve our website accessibility so we can offer all users the same quality experience.
Testing Forms
Automating the testing of forms helps speed up the test process and saves having to do the repetitive work of filling the form with test data.
We use Selenium IDE for our form testing because it is simple to use and is integrated into Firefox.
 |
| Selenium IDE |
Test Suite
With the redesign of our enhanced listing signup form we needed to rewrite our selenium test suite for testing the signup form.
Using selenium IDE we can record our actions in the browser and replay them so we can step through every test and check the form works as expected.
If you have used unit testing before selenium and its concepts will be familiar to you, with selenium the tester can assert things such as checking for error strings in the form when the form has been submitted or asserting a page has the desired title or heading.
We first start by testing the form to make sure that our error checking is working we like to test all the required fields in a form and stepping through each required for field and asserting the error string is present in the form.
Then we move through the form testing any other constraints such as passwords not matching and finally check the form with correct data to verify it works correctly.
Recording your browser is as simple as clicking the record button in the UI and then carry on as usual, you can also access rules and statements by right click your mouse or adding them directly from the IDE GUI.
Conclusion
When you need to test a form using selenium to drive it makes sense and it saves time and effort when rerunning any tests. We like to use test driven development to help improve the standard of our code base.
Very soon we will be moving The Care Homes Directory over to using a pure div layout for the whole website in an attempt to improve keyboard navigation of our website for improved accessibility for non mouse using visitors.
And releasing a new improved enhanced listings sign up form and Google wallet payment support which greatly improves the users experience.
Also we are adding aria data to our website and are improving our <nav> structure so we can improve our breadcrumbs.
Finished Building
The Care Homes Directory have completed compiling our local amenities database and are please to announce a comprehensive database covering the majority or homes and agencies listed on our website.
We now have over 100,000 records for local businesses and attractions which we have written about before here and here and we hope this helps our visitors when deciding on a home by providing even more information.
If you would like to have your amenity or business listed in our directory for care home providers and home and nursing care agencies please contact us here to discuss this opportunity.
 |
| Enhanced Listing |
