Need a Website? Do-It-Yourself WordPress and Accessibility

In case there was any doubt I'm a nerd, I recently set up WordPress v4.9.5 on my web server. WordPress is a free open source Content Management System (CMS) commonly used for blogging.

I know, the average AppleVis reader doesn't run their own web server or configure their own local WordPress site. Most use WordPress.com. Pros and cons to both approaches are described in this article comparing WordPress.com to DIY WordPress.

I used Safari, VoiceOver, and Terminal on MacOS v10.13.4 High Sierra for the entire process. This article focuses on the accessibility issues I encountered with WordPress, the WordPress plugins I installed, and the web-based services I used.

My web server is a Debian 7 Linux system, but I set up a second server and WordPress site on my MacBook Pro as a test. Because Linux and MacOS are both UNIX-like operating systems, there's very little difference between the two. This article applies to both MacOS and Linux, and describes differences when necessary.

While the concepts in this blog are technical in nature, there isn't a lot of technical detail. My deep dark secret? I don't actually know a lot of the technical details. But the internet is my manual. When I don't know something, I look it up with a web search. I've included links to many helpful online resources and step-by-step guides in this blog.

A Little About Terminal

I don't care for the way Terminal works with VoiceOver, so I installed TDSR for my Terminal screen reader. TDSR makes Terminal feel much more like SpeakUp running on a Linux console. In my opinion, it provides a better interface for reading lines of Terminal text and performing copy and paste operations.

Command line interfaces are inherently accessible. No unlabeled graphics or buttons, no clumsy mouseover controls, no endless menu hierarchies to navigate. Just text read through a screen reader. But you have to know what you're doing. The screen reader won't prompt you with options. See Taming the Terminal for an extensive overview.

Even though my web server is Linux, I use it through Terminal on my Mac. I can't remember the last time I used my Linux console directly.

Setting Up a LAMP System

This article doesn't cover setting up LAMP (Linux, Apache, MySQL, and PHP). Plenty of web resources detail this process. Here are a couple guides to help turn your computer into a web server.

• Setting up LAMP on MacOS
• Setting up LAMP on Linux

The tasks are similar for MacOS and Linux, but the commands vary between operating systems. The process is entirely command-line based. Terminal plus TDSR (or whatever screen reader you select) eliminates all accessibility issues.

While setting up my MacBook as a web server, I noted some differences between MacOS and Linux that you should be aware of.

• High Sierra ships with PHP7, while Sierra shipped with PHP5. Keep this in mind when editing your Apache2 httpd.conf file.
• I couldn't get the latest MySQL v8.0.11 to work. I used MySQL v5.7.22 instead.
• You can use the MySQL pane in System Preferences to start and stop MySQL. This is fully accessible with VoiceOver.
• Rather than create MySQL databases and users at the command line, you might want to use the web-based phpMyAdmin instead. Here's a MacOS LAMP guide that includes phpMyAdmin, and a guide for creating MySQL databases using phpMyAdmin. The phpMyAdmin interface is accessible, but I found it to be extremely complex.

Secure Your Domain with SSL

Before installing WordPress, I added an SSL certificate to my domain. An SSL certificate enables an encrypted connection between a web browser and web server. Properly configured SSL encrypts login and password credentials, so they can't be intercepted from web traffic. This means my WordPress admin password stays private.

If you're setting up an eCommerce site, you'll probably want an SSL certificate with a warranty, and those cost money. I don't need a warranty for my site, so I went with Let's Encrypt, a free SSL service.

Let's Encrypt makes setting up the SSL certificate entirely painless. A script called CertBot does everything with a single command line, including updating dependencies, obtaining and installing the certificate, and configuring Apache2 to redirect HTTP requests as HTTPS. The only thing I had to do manually was add HTTPS port 443 access through my local firewall.

Installing WordPress

Here's a guide for installing WordPress. It uses wget to obtain the latest WordPress PHP source. The wget command is fine for a Linux web server, but not available on MacOS by default. Instead of wget, use Safari to download the latest WordPress distribution then unzip it into your DocumentRoot or Apache hierarchy. That's /Library/WebServer/Documents on MacOS, and /var/www/html on most Linux systems. The WordPress.org download page is accessible.

The installation requires you to edit a wp-config.php file, but the previous link doesn't show this in an accessible way. The variables you must specify are DB_NAME, DB_USER, and DB_PASSWORD. The values depend on how you created your MySQL database. I hope you wrote them down.

After installing WordPress, open your WordPress site in Safari to view the welcome page and complete the setup. In a typical installation, your WordPress site URL is your domain name. I experience no accessibility issues with the WordPress welcome and setup pages.

MacOS Smart Invert Colors

If you're low vision like me, you may have noticed the installing WordPress web page illustrates installation steps using images of text with default black text on a white background. There is no alt text. Using Safari on MacOS 10.13.4 with colors inverted, the images do not invert. Here's an AppleVis forum discussion of the MacOS smart invert issue. For low vision users, the only solution is to install a second web browser that inverts images, such as Firefox, to view text images as white on black. This was the only MacOS accessibility issue I encountered.

The website doesn't rely on images for essential information, but if you're low vision, you might want Firefox for other websites that do, such as CloudFlare (see below).

MySQL Lockout!

WordPress stores all your blogs, pages, and comments in a MySQL database. To create a MySQL database, you must have MySQL administrator privileges.

I'm borderline OCD when it comes to keeping records and notes about how I set up my web server. That's why I was surprised to find that I had lost the administrator password for MySQL. Note to self—Take better notes.

Never fear. As long as you have root privilege on your MySQL host, you can reset the MySQL administrator password.

Using WordPress

Accessibility is trending in the open source community. Many large open source projects have taken steps to ensure their core components meet minimum accessibility standards, and WordPress is no exception. Some WordPress plugins might have accessibility issues. For now I want to focus on WordPress.

Core WordPress v4.9.5 is accessible out of the box using Safari and VoiceOver on MacOS v10.13.4 High Sierra. Within seconds of installing WordPress and stepping through the welcome pages, I was browsing my default WordPress site and the administrator backend, all of which were 100% accessible with Safari and VoiceOver.

Getting Around in the Administrator Backend

The WordPress administrator backend consists of a main menu control and a main content area that varies depending on the main menu selection.

The main menu control appears first in navigation. VO+right arrow a few times until you hear "Dashboard link" and "Home link", the first two main menu entries.

To skip past the entire main menu, jump to the first header, which is the start of the main content area. Note that the header of the main menu area often has the same name as the corresponding main menu entry. The difference is that the main menu entry is a link. Using Themes as an example, VoiceOver reads the main menu entry as "Themes Link", and read the header of the main content area as "Heading Level 1 Themes" or just "Themes" if you lower your VoiceOver verbosity.

After I became familiar with the main menu, I used VO+F to search for the entry I wanted, Dashboard, Themes, Plugins, whatever. I found this to be more efficient than VO+right arrow navigation.

Choosing a Theme

We want our WordPress site to be accessible. However, living in a sighted world, we also want it to look good. WordPress offers thousands of themes that affect not just the visual appearance of our site, but also the accessibility. Many themes come from third parties that aren't as concerned about accessibility as we are.

Use your newfound WP admin fu to jump to the Themes main content header. (Need help? VO+F and search for Themes. When you hear "Themes Link", select it with VO+spacebar, then jump to the first header on the page.) Core WordPress comes with a very limited number of themes. To browse and download other themes, VO+right arrow to the Add New link and select it.

The Add Themes page contains a search box. Try searching for "accessible" or "accessibility" to find themes that advertise accessible design in their description. But don't take their word for it—WordPress has a live preview mode that lets you take a theme for a test run and check accessibility yourself.

My advice is to select your theme with the help of a sighted friend. They're essential for telling you how it looks, obviously. But, in my experience, some of the controls get rather confusing when you enter live preview mode.

Assuming your site is up and you've selected a beautiful and accessible theme, next you'll want to make the website actually work.

WordPress Wants to Talk to You with Mail

WordPress sends an email every time someone posts a comment on your site. If you add a contact form, WordPress sends an email with the form content. But you won't get any email unless your WordPress site can send external mail.

I used a free web-based mail transfer agent (MTA) called MailGun.com. MailGun's WordPress plugin enables your WordPress site to send external email. Both the MailGun website and plugin were accessible, though as a low vision user I didn't care for the website's use of graphics and colors.

Just as a warning, MailGun needs your cell phone to send you a code when you first sign up for the service.

To use MailGun, you must add some DNS records to your domain name registrar. For me, that meant dealing with GoDaddy.

GoDaddy—The Poster Child for Web Accessibility

When I first started using GoDaddy for domain management, I had much better eyesight. Now that I'm practically blind, I regret that decision. The GoDaddy.com website is an accessibility nightmare. Here are a few issues:

• There is no Skip to Main Content link on any of the pages.
• The alphabetical menu to select country and region doesn't support first letter navigation.
• The site makes heavy use of dialogs that are difficult to navigate using every screen reader I've tried.
• For low vision users, the site mixes color schemes and displays text with a wide variety of font sizes. This causes problems for anyone using invert colors or magnification.
• The site over-markets. Web pages are filled with options to upgrade service or buy new products, which are often unrelated to other tasks on the page. These controls add clutter and impede site navigation.
• Tables fail to properly use column headers.
• Surprise! Many checkboxes and buttons aren't labeled.

Sadly, I could go on. But it's actually painful to enumerate these issues. My accessibility grade for GoDaddy is a D minus.

Stopping DDOS Attacks with a Firewall

CloudFlare is a proxy server that sits in front of your website. Its firewall prevents distributed denial-of-service (DDOS) attacks and blocks countries or IP addresses that you specify. The service is free with several paid upgrade options.

Setting up CloudFlare involves several components.

• The CloudFlare website
• The CloudFlare plugin for WordPress
• The CloudFlare module for Apache2
• Changing your domain name server (DNS)

The CloudFlare Website

Their website is usable but has some accessibility issues.

• Their landing page hides signing up for their free service. Do a VO+F and search for the Pricing link,
• Most of their web pages mix color schemes, light-on-dark and dark-on-light, which is problematic for low vision users.
• Their analytics page displays a line graph with mouseover data. There's no way to download analytics as a CSV or other tabular format.
• Reminiscent of GoDaddy's overmarketing, their dashboard commingles controls for free and paid services. (I understand they're trying to make money, but they don't realize how this sales technique impacts accessibility.)
• Their site contains extensive blog articles that explain how to use their services. Unfortunately, they sometimes contain screenshots of critical information with no ALT text.

I give CloudFlare's website a C for accessibility. I suggest you use this service with a sighted assistant.

Controlling CloudFlare Using WordPress

The WordPress plugin for CloudFlare simplifies configuration of the service. There are some order issues with the plugin's Settings main page content, and again the analytics display is visual-only and completely not accessible, but otherwise the plugin is accessible and entirely usable.

CloudFlare and Apache2

Because CloudFlare puts a proxy server in front of your website, the IP addresses in your Apache2 log files no longer reflect the actual IP address of the HTTP requests. The CloudFlare Apache2 module fixes this issue. I followed this CloudFlare support article for adding their Apache2 module. It's all command-line. No accessibility issues here.

Changing Your DNS

To use CloudFlare, you must change your domain name server (DNS). For me, that meant another visit to GoDaddy, as I already did for MailGun. And the same accessibility issues apply. I envy those of you who use an accessible domain name registrar.

The upside? After changing my DNS to CloudFlare, I use GoDaddy a lot less. CloudFlare might not be a panacea of accessibility, but at least it's not GoDaddy.

Adding WordPress Functionality with Plugins

The WordPress ecosystem provides thousands of plugins to enhance WordPress functionality. If core WordPress doesn't do what you want, try a web search for a WordPress plugin.

Adding a plugin is accessible. Go to the WordPress administrator dashboard and select Plugins off the main menu. Then navigate to the Add New link just after the Plugins heading. Use the search box to locate and install the plugin.

Here are five free plugins I use on my site.

• iThemes Security As a popular open source CMS, WordPress sites are susceptible to web attacks. iThemes provides several controls to reduce attacks, such as hiding the login page and administrator backend.
• WP_RSS_aggregator Core WordPress doesn't support displaying an external RSS feed. I was as shocked as you were. Fortunately, it's easy to display an RSS feed with this plugin.
• Contact Form 7 Core WordPress themes don't provide a contact form. If you want visitors to contact you, you'll need a plugin such as Contact Form 7.
• Google Captcha (ReCAPTCHA) Robots can easily submit bogus comments on your blog posts and send you spam email through your contact form. The Google Captcha plugin provides a robot-proof checkbox challenge, ensuring only humans submit comments.
• Google XML Sitemaps This plugin regenerates an XML sitemap file any time you add new content to your site. Web crawlers such as Google, Bing, Yahoo, and others use this sitemap to index your site, helping ensure your pages turn up in web search results.

All plugin Settings pages were accessible. Some had minor issues with content ordering or use of HTML headers.

Note that the Google Captcha plugin requires you to do some additional configuration on Google's web page. As you might guess, I encountered some minor accessibility issues with Google's Captcha web page, but nothing that would stop a determined AppleVis geek.

Conclusion

Setting up a do-it-yourself WordPress site on your MacOS or Linux system is accessible and, in case you missed it, entirely free.

Most accessibility issues stemmed from web pages of services I selected myself. GoDaddy is a big culprit. CloudFlare also had some issues. If you know of accessible domain registrars and proxy firewall services, please post in the comments.

Selecting a theme for visual aesthetics is inherently non-accessible, obviously. However, you can evaluate themes for accessibility before you enable them.

If others in the AppleVis community are actively managing web servers, with or without WordPress, I'd love to hear what you're doing. Please post a comment below.