Sıfırdan başlayıp editor içinde, pull request'lerde ve ortak dashboard'da accessibility findings görmeye geçmek yaklaşık 10 dakika sürer. Aşağıdaki adımlar tek seferliktir ve hepsi copy-paste edilebilir.
Neleri kuracaksınız?
Dört yüzeyde tek identity. Her biri opsiyonel, ama birlikte kullanıldıklarında kod yazmaktan accessible code göndermeye kadar olan döngüyü kapatırlar.
Command line
Kodunuzdaki gerçek sorunları, herhangi bir şey dışarı gönderilmeden saniyeler içinde bulun.
Editor
AI assistant'ınız Binclusive'in audit ve fix skills'lerini editor içinde kullanabilir hale gelir.
Pull request'ler
Her PR, anlaşılır findings ve fix önerileriyle inline olarak review edilir.
Dashboard
Findings, tüm ekibinizin görebileceği ve çözebileceği tracked tickets'a dönüşür.
Başlamadan önce
- Node.js 20 veya daha yeni bir sürüm.
node --versionile kontrol edin. - Workflow, secret ve variable ekleyebileceğiniz bir GitHub repository. Admin veya maintainer access gerekir.
- Bir Binclusive account. app.binclusive.io (yeni sekmede açılır) üzerinden sign in olun. GitHub App'i install etmek için org üzerinde admin access gerekir.
- Remote MCP destekleyen bir editor, örneğin Claude Code. Bu yalnızca Step 5'teki in-editor skills için gerekir.
1. CLI'ı install edin
CLI adı b8e. Local scans, setup ve CI check bu CLI üzerinden çalışır.
npm install -g @binclusive/cli b8e --version # 0.8.0 veya daha yeni
b8e tanınmıyorsa, Windows'ta sık görüldüğü gibi npm global bin folder büyük olasılıkla PATH içinde değildir. npm config get prefix komutunu çalıştırıp çıkan folder'ı PATH içine ekleyin ve terminali yeniden başlatın. Alternatif olarak PATH ile uğraşmadan her komutu npx ile çalıştırabilirsiniz: npx @binclusive/cli login.
2. Sign in olun
Bu adım browser'ınızı bir kez açar. Kopyalamanız gereken token yoktur.
b8e login b8e whoami # user ve active org bilgisini doğrular
3. Kodunuzu scan edin
Komutu repo'nuzda çalıştırın. Scan local çalışır, yani kodunuz makinenizden ayrılmaz.
b8e scan .
Her finding için file location, WCAG criterion ve plain-language fix önerisi görürsünüz. Herhangi bir key gerekmeden değer görmek için en hızlı yol budur.
4. Repo'yu wire up edin
Tek komut bu repo için config'i, CI workflow'u ve editor-skills bağlantısını scaffold eder.
b8e init # interactive, hangi parçaların ekleneceğini sorar # veya non-interactive olarak her şeyi tek seferde ekleyin: b8e init --all
Bu komut şunları yazar:
| File | Ne işe yarar |
|---|---|
binclusive.json | Project config, detected stack ve enforcement ayarları. |
.github/workflows/binclusive.yml | CI accessibility check. |
.mcp.json | Editor-skills server entry. |
init sonrasında bu dosyaları commit edin. CI check yalnızca workflow push edildikten sonra çalışır.
5. Audit skills'i editor'a ekleyin
Bu adım editor'ünüzdeki AI'a Binclusive skills kazandırır: project map çıkarma, audit çalıştırma ve fix uygulama. Token yapıştırmanız gerekmez; browser üzerinden sign in yapar.
claude mcp add --transport http binclusive https://mcp.binclusive.io/mcp
Ya da editor'ünüzün MCP config'ine bunu ekleyin:
{ "mcpServers": { "binclusive": { "type": "http", "url": "https://mcp.binclusive.io/mcp" } } }
Editor'ü restart edin. İlk kullanımda browser açılarak sign in olmanız istenir, ardından skills hazır olur. Şunu deneyebilirsiniz: "Use Binclusive to map this project and run an accessibility audit."
6. CI checks'i açın
Workflow'u dashboard'a bağlayan iki değer vardır: secret olarak saklanan bir key ve variable olarak saklanan bir project id.
a. CI key provision edin
Dashboard'da Settings -> CI Access -> Provision CI Token yoluna gidin. b8e_... key'ini kopyalayın. Bu key yalnızca bir kez gösterilir.
b. Repository secret olarak ekleyin
Repo'nuzda Settings -> Secrets and variables -> Actions -> New repository secret yolunu izleyin:
| Name | Value |
|---|---|
BINCLUSIVE_API_KEY | step a'daki b8e_... key |
c. Project id'yi repository variable olarak ekleyin
Dashboard'da project'inizi açın ve id'sini kopyalayın. prj_ ile başlar. Sonra Settings -> Secrets and variables -> Actions -> Variables -> New repository variable yoluna gidin:
| Name | Value |
|---|---|
BINCLUSIVE_PROJECT_ID | prj_... project id'niz |
Workflow bu iki değeri zaten referans alır; init bunu sizin için yazdı. Burada yalnızca değerleri sağlamanız gerekir.
7. GitHub App'i install edin
Bu adım findings'in pull request'lerde Binclusive-Bot tarafından inline review comments olarak paylaşılmasını sağlar. Böylece branding ve plain-language guidance PR yüzeyinde görünür.
App'i dashboard üzerinden install edin: Settings -> CI Access -> Install GitHub App. Organization'ınızı ve etkinleştirmek istediğiniz repository'leri seçin. Dashboard üzerinden install etmek, installation'ı otomatik olarak Binclusive org'unuza bağlar; bot'un comment yazabilmesi için gereken bağlantı budur.
Neden dashboard üzerinden? App'in yalnızca GitHub'a install edilmesi yetmez; Binclusive organization'ınıza da bağlanması gerekir. Dashboard flow ikisini tek adımda yapar. Gerekli permissions: read metadata, read/write checks ve read/write pull requests.
8. Pull request açın
Döngü bu kadar. Bir sonraki PR'ınızda:
- Binclusive-Bot changed lines üzerinde inline reviews paylaşır, her biri fix içerir.
- Findings dashboard project'inizde tickets olarak görünür.
- Check default olarak advisory çalışır:
fail-on: warn. Raporlar ama merge'ü block etmez. Gate yapmak içinfail-on: blockkullanabilirsiniz.
Configuration reference
| Name | Set as | Value |
|---|---|---|
BINCLUSIVE_API_KEY | repo secret | Settings -> CI Access içinden alınan b8e_... CI key. CI send işlemini authenticate eder. Personal key değildir. |
BINCLUSIVE_PROJECT_ID | repo variable | prj_... project id'niz. Findings'i doğru dashboard project'e yönlendirir. |
Interactive CLI browser sign-in kullanır: b8e login. Local kullanım için key gerekmez. Yukarıdaki key yalnızca CI içindir.
Review surfaces: duplicate yok
Findings iki tamamlayıcı yerde görünür. Ayrım bilinçli yapılır, böylece pull request iki kez annotate edilmez.
Pull request'lerde
Binclusive-Bot her finding'i diff üzerinde review comment olarak paylaşır ve fix önerisini ekler. PR surface burasıdır.
Default branch'te
main branch'e yapılan push'lar SARIF report upload eder. Böylece findings GitHub Security tab içinde native code-scanning alerts olarak da görünür.
Neleri check eder?
Binclusive source üzerinde static analysis çalıştırır ve live URL için full axe-core ruleset'i kullanır. Her finding bir WCAG success criterion ile eşlenir.
- web: React / TSX
- iOS: SwiftUI
- Android: layouts
- Shopify: Liquid themes
- Unity: scenes
- web: axe-core ile herhangi bir live URL
Troubleshooting
b8e: command not found / "not recognized"
npm global bin folder PATH içinde değildir. npm config get prefix çalıştırın, çıkan folder'ı PATH içine ekleyin ve terminali yeniden başlatın. Komutları npx ile de çalıştırabilirsiniz: npx @binclusive/cli <command>. Windows'ta global install sonrası yeni bir terminal açmak genellikle yeterlidir.
CI says "no project id was found"
BINCLUSIVE_PROJECT_ID repository variable'ını prj_... id'nizle set edin veya binclusive.json içine "project": "prj_..." ekleyin. Key tek başına yeterli değildir; findings'in dosyalanacağı bir project gerekir.
Check çalışıyor ama dashboard'da ticket görünmüyor
BINCLUSIVE_API_KEY değerinin Settings -> CI Access içinden alınmış CI key olduğundan emin olun. Bu bir org key olmalı, personal API key değil. Org yeni oluşturulduysa dashboard ingestion'ın enable edilmesi gerekebilir; support ile iletişime geçin.
Code-scanning annotations görüyorum ama Binclusive-Bot reviews yok
GitHub App henüz Binclusive org'unuza bağlı değildir. Step 7'deki dashboard flow üzerinden install edin. Doğrudan GitHub üzerinden install etmek, branded reviews için gereken bağlantıyı oluşturmaz.
Findings iki kez görünüyor (two bots)
Eski bir workflow kullanıyor olabilirsiniz; eski workflow her event'te SARIF upload ediyordu. Yeniden üretmek için b8e init --ci çalıştırın. Güncel workflow PR'larda branded reviews paylaşır ve SARIF'i yalnızca main üzerinde upload eder, bu yüzden double-posting olmaz.
CI finds "0 changed files"
Checkout shallow olabilir. Base branch ile diff alınabilmesi için workflow'daki actions/checkout step'inde fetch-depth: 0 gerekir. Scaffold edilen workflow bunu zaten içerir.
Source sizin kalır
Kodunuz makinenizden ayrılmaz. Scanning CI runner içinde local çalışır. Dashboard'a yalnızca her finding için küçük bir metadata fingerprint gönderilir: location marker, asla file contents veya source lines değil. Pull-request annotations GitHub'a yazılır; kodunuz zaten GitHub'dadır.
Binclusive engineering teams için accessibility infrastructure geliştirir. Başlamak için app.binclusive.io (yeni sekmede açılır).