Jump to content

Making Forms Readable for Screenreaders

Recommended Posts

Site URL: http://rebirthgarments.com/

The audience my friend works with includes a high range of people with disabilities ( Rebirthgarments; "a line of gender-nonconforming wearables and accessories, centering non-binary, trans, disabled and queer people of all sizes and ages") . We've found that our "Contact Page" and any "forms" people fill out to customizing clothing sizes are not screenreader friendly (heard through feedback). Luckily it seems the contact page and forms are both the same structure (filling out a form) so we atleast know they're not readable for the same reason. Is there any resources for code that could help make these more accessible? I'm thinking I may have to use a different site or different structure for filling forms that isn't using the form template that squarespace provides. Full disclosure I can follow instructions but I am not a coder by any means, just trying to help them troubleshoot. Thanks!

Link to comment

I'm also trying to change form font and size, as Squarespace's standard form settings are very small and hard to read. I can't seem to find a solution but I'll keep looking and post here if I find anything. 

Link to comment

// Contact Form //

.form-wrapper .field-list .title{
   font-family:'Sequel 100 Black 75'!important;
  text-align: center !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
}

Link to comment

Made one for my website using this! Hope it helps.

// contact form //

.form-wrapper .field-list .field select { font-family: 'Silk Serif';
}

.form-wrapper input[type="submit"] {
 display: border;
}
.form-wrapper .field-list .title{
   font-family:'Silk Serif'!important;
  
}
.form-wrapper .field-list .field .caption{
  font-family:'Silk Serif'!important;
  text-align: center !important;
}

.form-wrapper .field-list .description{
   font-family:'Silk Serif'!important;
  text-align: center !important;
}

.form-wrapper .field-list .field .field-element
 {
  outline: none !important;
}
.form-wrapper .field-list .field select
{font-family:'Silk Serif';
font-size: 10px;
text-transform: uppercase;
}

.form-wrapper .field-list .field select {
    padding: 0px;
    width: 100%;
  background-color: #FAFAFA
}
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.