Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'accessibility'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Site Information
    • Information
    • Challenge Voting
    • Ask us
    • Introduce Yourself
  • Spotlight RPG Challenge
  • Roleplay Conversations
    • Roleplay Chat
    • Roleplay Management
    • Member Confessions
    • Staff Confessions
    • Shout Outs
  • Creation & Development
    • Brainstorming & Ideas
    • Hosting Discussions
    • Graphics Discussion
  • Assistance
    • Site Reviews
    • Coding Help & Requests
    • Graphics Requests
  • Personal RP Requests
  • Site Requests
  • Wanted
  • Learn HTML/CSS's General conversation
  • Learn HTML/CSS's Ask for help
  • Learn HTML/CSS's Quick Tips
  • Modern Fantasy Circle's Topics
  • Historical RPs's Topics
  • Book Club's Topics
  • Make My Life Make Sense's Topics
  • Dragonriders of Pern Boards's Topics
  • IPS Staff People's Topics
  • IPS Staff People's Tips and Tricks
  • IPS Staff People's IPS Character Manager
  • IPS Staff People's IPS Character Manager Suggestions
  • IPS Staff People's Character Manager Testing
  • Jcink Hosted's Topics
  • Graphics Showcase & Discussion's Topics
  • MyBB Staff People's Topics
  • SMF Staff People's Topics
  • Monster Fans's Topics
  • Discord's Topics
  • Gamers's Topics
  • Pet People's Topics
  • Site Design's Topics
  • Cooking's Topics
  • Cooking's Recipes
  • Star Trek's Topics
  • Star Wars's Topics
  • Game of Thrones's Topics
  • Cosplay's Topics
  • The Writing Pad's Discussion
  • The Writing Pad's Writing Exhibit
  • MTV's THE REAL WORLD!'s Non-RP Chat & Discussion
  • MTV's THE REAL WORLD!'s RL Storytime
  • MTV's THE REAL WORLD!'s The Hot Seat
  • MTV's THE REAL WORLD!'s Forum Games
  • NaNoWriMo's Information
  • NaNoWriMo's Previous NaNoWriMo Years
  • NaNoWriMo's Current NaNoWriMo
  • Harry Potter's Topics
  • Dr Who's Topics
  • Supernatural (The TV Show)'s Topics
  • Firefly's Topics
  • The Bug Enthusiast's Bugs, mice, and all things talk
  • Vesta Software's Development and Info
  • Vesta Software's Feature Requests
  • Vesta Software's Questions
  • Vesta Software's Feedback and Discussion
  • Movie Club's Post-Movie
  • Movie Club's Pre-Movie
  • Movie Club's Test
  • Movie Club's Topics
  • NOVA's Topics
  • The Art Studio's Topics
  • Avatar the Last Airbender's Topics
  • Cryptozoology's Topics
  • World Building's Topics
  • World Building's Map Building
  • World Building's General Discussions

Categories

  • The Initiative Services and Features
  • Forum Building and Management
  • Writing Materials
  • Being a Member
  • Software
  • Coding
  • Graphics

Categories

  • Roleplay Search
  • Writing Partner Search
  • Character Home Search

Categories

  • General Update
  • Announcement
  • Operations
  • Communications
  • Contributions
  • Tomfoolery

Categories

  • Active Challenges
  • Archived Challenges

Categories

  • Application Templates
  • Plotters
  • Post Templates
  • Staff Templates
  • Thread Trackers
  • Other
  • Pending Challenge Entries
  • Past Challenge Entries

Categories

  • Communications
  • Contributions
  • Operations

Categories

  • Jcink Themes
  • ProBoards/FreeForums Themes
  • MyBB Themes
  • IPS Themes
  • SMF Themes
  • phpBB Themes
  • Other Themes
  • Modifications
  • Make My Life Make Sense's Files
  • Dragonriders of Pern Boards's Files

Blogs

There are no results to display.

There are no results to display.

Calendars

  • Community Calendar
  • Character Birthdays
  • Book Club's Events
  • Make My Life Make Sense's Events
  • Dragonriders of Pern Boards's Events
  • NaNoWriMo's Virtual Write Ins
  • Cryptozoology's Events

Product Groups

  • Converted Subscriptions
  • Hosting
  • Advertising

Collections

  • Settings
  • Staff
  • Notifications
  • Forums
  • Submitting to the Directory
  • RPG Directory
  • Playby Directory
  • Searching for Roleplay
  • Guides
  • Challenges
  • Character Wanted Ads
  • Affiliate & Staff search

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Discord


Twitter


Skype


NaNo House


Game of Thrones House


Bending Nation

Found 3 results

  1. One of the things that can prevent people from joining your site is the level of contrast that is between the text and the background. Low contrast sites are unintelligible for some and difficult to use for others. There is no reason not to have good contrast on your site, surely you want people to be able to read the text? Thankfully, you don’t need to make any guesses as to whether or not your site has enough contrast! Accessible Colors is a useful tool that provides a contrast checker that will tell you whether or not the colour combination has sufficient contrast. When using the website, be sure to input the foreground (text) colour, the background colour and the font size. Larger text needs less contrast to be legible! Accessible Colors will analyse the colours and font size chosen to ensure that it meets W3C's web accessibility guidelines. W3C develops guidelines with an aim to remove barriers that creep into web designs. Depending on what software you use for your roleplay site (and your own know how), it can be difficult to fully meet their guidelines. Ensuring good contrast is however, an easy guideline to meet and will help to ensure that as many people as possible are able to use your site.
  2. kjSage

    Accessible ARIA Tabs

    https://github.com/DavideTriso/aria-tabs
  3. My board is here. So, I'm looking to make my site's skin more accessible, and part of this includes a new tab system. What I'm attempting to do (following this tutorial) and have mostly succeeded with is allowing people to tab through the tabs (hah) and use enter key to switch to a tab. I'm also looking to let the user use their arrow keys to automatically switch through the tabs as well. Tab/enter key works fine, but the second I try to use the arrow key method is where the code is going haywire. If I use the arrow keys, it appears as if all the tabs are selected except the one that was navigated away from. The "focused" tab then becomes the last tab in the list, and the displayed content becomes the first tab. Needless to say it's not doing what it's supposed to, and I'm unsure of how to fix it. On the tutorial linked above, you can see that using the arrow keys automatically switches between the tabs as intended (or seems to, there's only two tabs there, compared to my 5-6) Here's the js I'm using: <script> $(document).ready(function(){ $("#sidebar li[role='tab']").click(function(){ $("#sidebar li[role='tab']:not(this)").attr("aria-selected","false"); //$("#sidebar li[role='tab']").attr("tabindex","-1"); $(this).attr("aria-selected","true"); //$(this).attr("tabindex","0"); var tabpanid= $(this).attr("aria-controls"); var tabpan = $("#"+tabpanid); $("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true"); $("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden"); tabpan.removeClass("hidden"); //tabpan.className = "panel"; tabpan.attr("aria-hidden","false"); }); //This adds keyboard accessibility by adding the enter key to the basic click event. $("#sidebar li[role='tab']").keydown(function(ev) { if (ev.which ==13) { $(this).click(); } }); //This adds keyboard function that pressing an arrow left or arrow right from the tabs toggel the tabs. $("#sidebar li[role='tab']").keydown(function(ev) { if ((ev.which ==39)||(ev.which ==37)) { var selected= $(this).attr("aria-selected"); if (selected =="true"){ $("#sidebar li[aria-selected='false']").attr("aria-selected","true").focus() ; $(this).attr("aria-selected","false"); var tabpanid= $("#sidebar li[aria-selected='true']").attr("aria-controls"); var tabpan = $("#"+tabpanid); $("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true"); $("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden"); tabpan.attr("aria-hidden","false"); tabpan.removeClass("hidden"); //tabpan.className = "panel"; } } }); }); </script> My tab css: ul.controlList { list-style-type: none; } li[aria-selected='true'] {} .panel[aria-hidden='true'] { display: none; } .panel[aria-hidden='false'] { display:block; } .hidden {display:none;} .tablist { list-style: none outside none; margin: 0px; padding: 0px; display: block; background-color: #080808; border-bottom: 2px solid #1e2733; border-top: 3px solid #252d34; text-align: center; } .tabs { background-color: transparent; padding: 5px; } .tab { display: inline; border-bottom: none; cursor: pointer; padding: 0 4px; font-family: georgia, times, serif; text-transform: uppercase; color: #5b656d; } .tab:focus, .tab:active, .tab[aria-selected='true'] { color: #374C5D; cursor:default; } .panel { background-color: #121212; padding: 5px; clear:both; } and the tab html: <aside id="sidebar" role="complementary"> <ul class="tablist" role="tablist"> <li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Welcome</li> <li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">Links</li> <li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Chat</li> <li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Staff</li> <li id="tab5" class="tab" aria-controls="panel5" role="tab" aria-selected="false" tabindex="0">©</li> </ul> <div class="tabs"> <div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false"><% WELCOME %></div> <div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true"><div class="sidelink"><% LINKS %></div></div> <div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true"><% CHAT %></div> <div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true"><% STAFF %></div> <div id="panel5" class="panel" aria-labelledby="tab5" role="tabpanel" aria-hidden="true"><% CREDITS %></div> </div> </aside> Any help with this would be appreciated!
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.